import React, { Component } from 'react';
import { inject, observer } from "mobx-react";
import { LoginStore } from "../store";
import { Button } from 'antd-mobile';

interface ILoginFormProps{
  loginStore?: LoginStore | any;
}

@inject('loginStore')
@observer
export default class LoginForm extends Component<ILoginFormProps, any> {

  render() {
    let {
      editInput,
      changeEditInput,
      isShowPassword,
      loginBtnStatus,
      changeAccount,
      changePassword,
      switchShowPass,
      doLogin
    } = this.props.loginStore;
    return (
      <div className="login-form">
        <div className={`login-input-box${editInput==="account" ? " focus" : ""}`}>
          <input
            className="login-input"
            type="tel"
            pattern="[0-9]*"
            placeholder="请输入手机号"
            maxLength={11}
            onFocus={() => changeEditInput("account")}
            onChange={(e) => changeAccount(e.target.value)}
          />
        </div>

        <div className={`login-input-box${editInput==="password" ? " focus" : ""}`}>
          <input
            className="login-input"
            type={isShowPassword ? 'text' : 'password'}
            placeholder="请输入密码"
            autoComplete="off"
            pattern="/^[A-Za-z0-9]{6,16}$/"
            onFocus={() => changeEditInput("password")}
            onChange={(e) => changePassword(e.target.value)}
            maxLength={16}
          />
          <span className="eye-box" onClick={switchShowPass}>
            {isShowPassword ? <i className="dishfont">&#xe69e;</i> : <i className="dishfont">&#xe642;</i>}
          </span>
        </div>

        <div className="login-btn-box">
          <Button
            type="primary"
            disabled={loginBtnStatus === 1}
            loading={loginBtnStatus === 3}
            onClick={() => doLogin()}
          >
            登录
          </Button>
        </div>
      </div>
    );
  }

}
